<script setup lang="ts">
    import { availableDateStr } from '../../utils'
    import Clipboard from 'clipboard'
    const props = defineProps < { data: Profile } > ()

// const copy = (() => {
//     var clipboard = new Clipboard('.copy-code-button') 

//     })
</script>
<template>
    <div v-if="data">
        <div class="main" :class="data.role">
            <div class="left">
                <div>{{ data.name }}</div>
            </div>
            <div class="right">
                <div class="availability"
                    :class="{ green: availableDateStr(data.availability.availableDate) == '随时', yellow: availableDateStr(data.availability.availableDate) !== '随时' }">
                    <span v-if="data.availability">{{ availableDateStr(data.availability.availableDate) }}可入场</span>
                </div>
            </div>
        </div>
        <div class="introduction">
            <!--TODO： 报酬的变动：做一个报酬的变动发展图（el-drawer）数据的改变 康露露 党建 9.15-->
            <div v-if="data.cost" class="underline">
                费用标准：
                <span class="span1">{{ (data.cost.amount).toLocaleString() }}元</span>
                {{
                (data.cost && data.cost.unit) == 'PerManMonth' ? '/人月' : (data.cost && data.cost.unit) == 'PerManDay'
                ? '/人天' : '/人小时'
                }}
                <div class="rightBtn">
                    <el-button icon="el-icon-right">
                    </el-button>
                </div>
            </div>

            <div class="underline">
                职&emsp;&emsp;位：
                <span v-if="data.profession" class="span1">{{ data.profession.occupation }}</span>
            </div>
            <div class="underline">
                年&emsp;&emsp;龄：
                <span class="span1">{{ data.age }}岁</span>
            </div>
            <div class="underline">
                学&emsp;&emsp;历：
                <span class="span1">{{ data.education && data.education.diploma }}</span>
            </div>

            <div class="underline">
                工作经验：
                <span v-if="data.profession" class="span1">{{ data.profession.experience }}年</span>
                <!-- <el-button type="text" @click="oncopy">复制</el-button> -->
            </div>
            <!-- <div class="underline">
                <span>{{data.name}}</span>
                <span class="copy-code-button" data.name="inviteCode" @click="copy">复制</span>
            </div>-->
        </div>
    </div>
</template>
<style scoped>
    img {
        width: 100%;
    }

    .main {
        display: flex;
        flex-direction: row;
        flex: 5;
        border-bottom: solid 1px lightgray;
        border-left: solid 20px #0cb518;
    }

    .manager {
        border-left: solid 20px red;
    }

    .main {
        display: flex;
        align-items: center;
    }

    .main .left {
        font-size: 30px;
        margin: 16px;
        color: black;
        flex: 1;
    }

    .main .right {
        flex: 1;
        text-align: right;
    }

    .introduction {
        font-weight: bold;
        padding: 0px 24px;
        line-height: 2;
        color: #505050;
        font-size: 16px;
    }

    .span1 {
        color: black;
        font-size: large;
    }

    .availability {
        padding: 4px 8px;
        font-size: 14px;
        font-weight: 400;
        display: inline-block;
        border-radius: 6px;
        flex: 2;
        margin-right: 24px;
    }

    .green {
        background-color: #15be47;
        border: solid 2px #15be47;
        color: white;
    }

    .yellow {
        border: solid 1px #fd9904;
        background-color: white;
        color: #fd9904;
    }

    .underline {
        border-bottom: 0.05px solid #ffffff;
    }

    /* 报酬动向 */
    .rightBtn {
        background-color: #0cb518;
        display: inline-block;
    }
</style>